<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>博客</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet">
</head>
<body>


<!--主容器-->
<div class="ui container">

    <div th:replace="~{/commons/common::nav-menu(active='blog.html')}"></div>

    <!--中间主体-->
    <div class="ui grid">
        <div class="row">
            <!--首页博客-->
            <div class="twelve wide column">
                <div class="ui segment">
                    <div class="content">
                        <div class="ui divided items">

                            <div class="item" th:each="article:${articles}">
                                <div class="middle aligned content">
                                    <div class="ui teal  horizontal label" th:text="${article.getTag()}"></div>
                                    <a th:href="@{/blog/toArticle/}+${article.getId()}" th:text="${article.getTitle()}"></a>
                                </div>
                                <a class="ui teal  horizontal label"
                                   th:text="删除文章" style="cursor: pointer"
                                   th:onclick="|javascript:delFunction(${article.getId()})|"></a>
                                <div class="right">
                                    <a class="ui teal circular label">2</a>
                                </div>
                            </div>


                            <!--分页实现-->
                            <hr>
                            <div style="text-align: center">
                                <button class="ui blue basic compact button">首页</button>
                                <button class="ui blue basic labeled icon compact button">
                                    <i class="left chevron icon"></i>
                                    上页
                                </button>
                                <button class="ui compact button">1</button>
                                <button class="ui blue basic right labeled icon compact button">
                                    下页
                                    <i class="right chevron icon"></i>
                                </button>
                                <button class="ui blue basic compact button">尾页</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--博客侧边栏-->
            <div class="four wide column" th:fragment="blog-right-card">

                <div class="ui raised card">
                    <div class="content">
                        <div class="header">公示栏</div>
                        <div class="description">
                            <p><i class="edit outline icon"></i> 博客统计：<span>999</span></p>
                            <p><i class="user outline icon"></i> 会员总数：<span>999</span></p>
                            <p><i class="comment alternate outline icon"></i> 交流群：<span>664386224</span></p>
                        </div>
                    </div>
                    <div class="extra content">
                        <div class="right floated author">
                            <span>即使再小的帆也能远航</span>
                        </div>
                    </div>
                </div>
                <!--写博客-->
                <div class="ui raised card">
                    <div class="content">
                        <a th:href="@{/blog/toPostArticle}" class="fluid positive ui button">写博客</a>
                    </div>
                </div>
                <!--标签-->
                <div class="ui raised card">
                    <div class="content">
                        <div class="header">博客标签</div>
                        <div class="description" id="blog-lable">
                            <a class="ui yellow label" th:each="tag:${tags}" th:text="${tag.getTagName()}">

                            </a>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>


    <div th:replace="~{/commons/common::common-footer}"></div>
</div>


<script th:src="@{/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/qinjiang/js/semantic.min.js}"></script>
<script th:src="@{/editormd/layer/layer.js}"></script>
<script>
    //选项卡
    $('.menu .item').tab();
</script>

<script>
    function delFunction(){
        //询问框
        layer.confirm('确认删除?', {
            btn: ['删除','返回'] //按钮
        }, function(a_id){
            $.post('/blog/del',{"id":a_id});
            layer.msg('删除成功', {icon: 1});
            window.location.reload();
        }, function(){
            layer.msg('取消成功',{icon: 1})
        });
    }

</script>

</body>
</html>


